<template>
  <div class="mainIndex-container">
    <el-row :gutter="20">
      <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
      <el-col :xs="24" :sm="15">
        <el-card style="background-color: rgba(255,255,255,0.9)" class="left-item">
          <div class="total">

          </div>
          <el-row type="flex" align="middle" style="flex-wrap: wrap" :gutter="20" v-for="blog in blogList"
                  :key="blog.id"
                  shadow="never" class="blog-content">
            <div @click="getBlogInfo(blog.id)">
              <el-col class="img" :xs="24" :sm="24"
                      style="padding-left: 10px;padding-right: 10px;margin-bottom: 5px;margin-top: -5px;">
                <div>
                  <h3>{{ blog.title }}</h3>
                  <div class="blog-info">
                    <div class="user-info">
                      <i class="el-icon-user"></i>
                      <span class="header"> {{ blog.nickname }}</span>
                    </div>
                    <div class="blog-date">
                      <i class="el-icon-date"></i>
                      <span> {{
                          new Date(blog.createTime).toLocaleString('zh-CN', {
                            timeZone: 'Asia/Shanghai',
                            hour12: false
                          })
                        }} </span>
                    </div>
                    <div>
                      <i class="el-icon-view"></i>
                      <span> {{ blog.views }}</span>
                    </div>
                  </div>
                </div>
              </el-col>
            </div>
          </el-row>
          <template>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="queryParams.pageNum"
                :page-size="queryParams.pageSize"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </template>
        </el-card>


      </el-col>

      <el-col :xs="24" :sm="5">
        <el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item">
          <div class="attributes">
            <b>最新推荐</b>
          </div>
          <div class="recommend-blog l-text" v-for="blog in newList" :key="blog.id"
               @click="getBlogInfo(blog.id)">
            <a class="recommend-a">{{ blog.title }}</a>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "BlogMain",
  data() {
    return {
      recommendList: [],
      blogList: [],
      // 总条数
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
      newList: []
    }
  },
  mounted() { //页面加载后触发
    this.fetchData()
    this.newData()
  },
  methods: {
    getBlogInfo(id) {
      this.$request.get(`/blogs/${id}`).then(res => {
        if (res.code === 200) {
          this.$router.push('/index/blogInfo')
          localStorage.setItem('blog-info', JSON.stringify(res.data.blogs))
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.$message.error("系统错误")
      })
    },
    fetchData() {
      this.$request.post('/blogs/queryBlogs', this.queryParams).then(res => {
        if (res.code === 200) {
          this.blogList = res.data.blogs
          this.$emit('updateSearchList', this.blogList)
          this.queryParams.pageNum = res.data.pageNum
          this.queryParams.pageSize = res.data.pageSize
          this.total = res.data.total
          this.recommendList = res.data.blogs
        } else {
          this.$message.error("请求错误")
        }
      }).catch(() => {
        this.$message.error("系统错误")
      })
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.fetchData(); // 当每页显示条数改变时，重新获取数据
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.fetchData(); // 当每页显示条数改变时，重新获取数据
    },
    newData() {
      this.$request.post('/blogs/newBlogs', this.queryParams).then(res => {
        if (res.code === 200) {
          this.newList = res.data.blogs
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.$message.error("系统错误")
      })
    },
  }
}
</script>

<style scoped>
.total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: larger;
  font-weight: bold;
}

.header {
  text-decoration: none;
  color: #3a8ee6;
  font-weight: bold;
}

.blog-content {
  padding: 10px;
  height: auto;
  border-bottom: 1px solid rgb(199, 163, 92);
  /*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
  transition: .3s;
}

.blog-content:hover {
  border-left: 5px solid #3a8ee6;
  border-right: 5px solid #3a8ee6;
  background-color: rgba(58, 142, 230, 0.3);
  cursor: pointer;
}

.right-item {
  margin-bottom: 20px;
}

.blog-info {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, .4);
  font-size: 10px;
}

.user-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: 15px;
  float: left;
}

@media screen and (max-width: 768px) {
  .blog-date {
    display: none;
  }
}

.recommend-blog {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0;
  border-radius: 5px;
}

.recommend-a {
  border-bottom: 1px solid rgba(34, 36, 38, .15);
  line-height: 40px;
  display: block;
  text-decoration: none;
  color: black;
  cursor: pointer;
}

.recommend-a:hover {
  color: #3a8ee6;
}
</style>
